<template>
  <div class="con-box">
    <div class="box-tit">采购清单详情</div>
    <div class="des-top">
      <el-row :gutter="20" class="first">
        <el-col :span="8">
          <el-row>
            <el-col :span='12'>
              <div>清单名称</div>
            </el-col>
            <el-col :span='12'><span>{{detail.name}}</span></el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span='12'>
              <div>采购单号</div>
            </el-col>
            <el-col :span='12'><span>{{detail.id}}</span></el-col>
          </el-row>
        </el-col>

        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-row>
            <el-col :span='12'>
              <div>简介</div>
            </el-col>
            <el-col :span='12'><span>{{detail.synopsis}}</span></el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span='12'>
              <div>采购地址</div>
            </el-col>
            <el-col :span='12'><span>{{detail.province}}{{detail.city}}{{detail.area}}{{detail.address}}</span></el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-row>
            <el-col :span='12'>
              <div>提报开始时间</div>
            </el-col>
            <el-col :span='12'><span>{{detail.startTime}}</span></el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span='12'>
              <div>提报结束时间</div>
            </el-col>
            <el-col :span='12'><span>{{detail.endTime}}</span></el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row> <el-row :gutter="20">
        <el-col :span="8">
          <el-row>
            <el-col :span='12'>
              <div>提报开始时间</div>
            </el-col>
            <el-col :span='12'><span>{{detail.startTime}}</span></el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span='12'>
              <div>提报结束时间</div>
            </el-col>
            <el-col :span='12'><span>{{detail.endTime}}</span></el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
         <el-row >
           <el-col :span='12'>
             <div>采购类型</div>
           </el-col>
           <el-col :span='12'><span>{{type.name}}</span></el-col>
         </el-row>
        </el-col>

        <el-col :span="8">
        </el-col>
      </el-row>
    </div>
    <div class="box-tit">已录商品（已下单{{submitProdCount}}个 ，待下单{{submitCount}}个， 预计金额：￥{{  completeProdTotalAmount}} 实付金额：￥{{submitProdTotalAmount}} ）</div>
    <el-table :data="cpProdInfos" style="width: 100%">
      <el-table-column prop="prodName" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="prodId" label="商品编号" width="180">
      </el-table-column>
      <el-table-column prop="price" label="价格">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope='scope'>
          <span v-if='scope.row.status==1'>未下单</span>
          <span v-if='scope.row.status==2'>已下单</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="box-tit">提报人（已提报{{submitCount}}个 ，未提报{{notSubmitCount}}个 ）</div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="联系方式" width="180">
      </el-table-column>
      <el-table-column prop="department" label="部门">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope='scope'>
          <span v-if='scope.row.status==0'>未提报</span>
          <span v-if='scope.row.status==1'>已提报</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        id: '',
        detail: {},
        type:{},
        notSubmitCount:0,
        submitCount:0,
        completeProdCount: 0,
        completeProdTotalAmount: 0,
        cpProdInfos: [],
        submitProdCount: 0,
        submitProdTotalAmount: 0,
      }
    },
    mounted() {
      // 设置网页标题
      document.title = '清单详情'
      //获取清单详情
      this.id = this.$route.query.id
      this.getDetail(this.id)
      //获取采购类型
      this.getType()
      //获取提报人先洗数据
      this.getTb()
      //获取提报商品
      this.getTbSp()
    },
    methods: {
      //获取提报商品
      getTbSp(){
        this.$axios.get("/p/cp/cpProdInfoAndCount?cpId="+this.id).then(({
          data
        }) => {
          this.completeProdCount=data.completeProdCount
          this.completeProdTotalAmount=data.completeProdTotalAmount
          this.cpProdInfos=data.cpProdInfos
          this.submitProdCount=data.submitProdCount
          this.submitProdTotalAmount=data.submitProdTotalAmount
        })
      },
      getTb(){
        this.$axios.get("/p/cp/"+this.id+"/spInfoAndCount").then(({
          data
        }) => {
          this.notSubmitCount=data.notSubmitCount
          this.submitCount=data.submitCount
          this.tableData=data.cpSubmitPersonInfoAndSubmitStatusList
        })

      },
      //获取采购类型
      getType() {
        this.$axios.get('/p/cp/type/info').then(({
          data
        }) => {
          this.type = data[0]
        })
      },
      //获取清单详情
      getDetail(id) {
        this.$axios.get('/p/cp/info/' + id).then(({
          data
        }) => {
          console.log(data)
          this.detail = data
        })
      },
    }
  }
</script>

<style scoped src='~/assets/css/uc-edit.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
<style>
  .des-top {
    font-size: 14px;

  }

  .des-top .el-row {
    margin: 10px;
  }
</style>
